<!--  -->
<template>
   <div class="header">
      <div class="left">
         <img class="logo" src="../../assets/images/homeLogo-d8fb562a.jpg">
         <div @click="goHome" class="index" :class="{ blue: route.path === '/index'}">
            <span class="icon iconfont icon-shouye-shouye"></span>
            首页
         </div>
         <div class="tip">admin,下午好！外面的天气好吗？记得朵朵白云曾捎来朋友殷殷的祝福。</div>
      </div>
      <div class="right">
         <TopMenu></TopMenu>
         <div class="outlogin" @click="exitLogin">
            <i class="iconfont icon-tuichu1"></i>
            退出登录
         </div>
         <el-dialog v-model="dialogVisible" title="提示" width="500">
            <span>您确认退出吗</span>
            <template #footer>
               <div class="dialog-footer">
                  <el-button @click="dialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="comform">
                     确认
                  </el-button>
               </div>
            </template>
         </el-dialog>
      </div>
   </div>
</template>

<script lang='ts' setup>
import TopMenu from '../home/TopMenu.vue';
import { useRouter,useRoute } from 'vue-router'
import { ref } from 'vue'


let dialogVisible = ref(false)

const router = useRouter()
const route= useRoute()

const exitLogin = () => {
   dialogVisible.value = true
}

const comform = () => {
   //清除所有缓存
   sessionStorage.clear();
   //跳转到登录页
   router.push("/login");
}


const goHome = () => {
   router.push('/index')
}
</script>
<style scoped lang="less">
.header {
   height: 100%;
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: space-between;
   font-size: 12px;
   position: fixed;
   top: 0;

   // background: #f4f4f4;
   z-index: 999;
   .left {
      align-items: center;
      display: flex;

      .index {
         cursor: pointer;

      }

      .blue {
         color: #2981ff;
      }

      .logo {
         height: 20px;

         margin-right: 20px;
      }

      .tip {
         margin-left: 20px;
      }

   }

   .right {
      // width: 100px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      justify-content: center;

      .outlogin {
         cursor: pointer;
         margin-left: 30px;
         font-size: 13px;
      }
   }
}
</style>